<template>
  <v-autocomplete
    v-model="select"
    :items="categoryList"
    :label="label"
    outlined
    :multiple="false"
    return-object
    item-text="category_name"
    item-value="id"
    :disabled="disabled"
    dense
    full-width
    auto-select-first
  ></v-autocomplete>
</template>

<script>
// 文章栏目选择组件
import { ArticleCategory } from "@/store/models/article"
export default {
  name: "CategorySelector",
  model: {
    prop: "selected",
    event: "change",
  },

  props: {
    selected: {
      type: Object,
      required: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: "选择文章栏目",
    },
  },

  data: () => ({
    categoryList: [],
  }),

  computed: {
    select: {
      get() {
        let select = this.selected;
        return select;
      },

      set(val) {
        let select = val;
        this.$emit("change", select); // 告诉父组件选择分类更新了
      },
    },
  },

  created() {
    this.getData()
  },

  methods: {
      async getData(){
        const res = await ArticleCategory.fetch({}, 1, 0)
        this.categoryList = res.results
      }
  },
};
</script>
